<template>
	<!-- 员工查看自身权限 -->
	<view class="viewRoot">
		<navBar title="权限详情" isBack backColor="#333" color="#333" background="#fff"></navBar>
		<view class="rootBox">
			<view class="bigBox">
				<h3>{{name}}</h3>
				<!-- <view class="title" v-for="(item,index) in rootList" :key="index"> -->
					<!-- {{item.type}}： -->
					<view class="item" v-for="(item1,index1) in rootList" :key="index1" :style="index1==rootList.length-1?'border:0;':''">
						{{item1.name}}
						<image :src="`${baseImg}/static/adminShop/gouxuan.png`" mode=""></image>
					</view>
				<!-- </view> -->
			</view>
			<view class="positBox">
				<image :src="headImg" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				baseImg:this.$static,
				rootList:[],
				name:'',
				headImg:''
			}
		},
		onLoad(options) {
			console.log(options,'员工员工')
			this.staff_user_id = options.staff_user_id
			this.name = options.name
			this.headImg = options.headImg
			this.getStaffInfo()
		},
		
		methods:{
			// 获取员工自身权限信息
			getStaffInfo(){
				this.$api.viewSelfRoot().then(res=>{
					console.log(res,'员工权限信息')
					if(res.code==1){
						this.rootList = res.data.list?res.data.list:[]
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.viewRoot{
		padding: 0 24rpx;
		.rootBox{
			margin:126rpx auto 136rpx;
			position: relative;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			.bigBox{
				padding: 86rpx 0 8rpx 0;
				width: 702rpx;
				background-color: #fff;
				border-radius: 16rpx;
				font: 400 26rpx/40rpx PingFang SC;
				h3{text-align: center;font: 600 28rpx/48rpx PingFang SC;color: #333;margin-bottom: 10rpx;}
				.title{
					padding-top: 30rpx;
					padding-left: 10rpx;
					font: 600 28rpx/40rpx PingFang SC;
					color: #333;
				}
				.item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #333;
					padding: 32rpx 24rpx 32rpx 28rpx;
					border-bottom: 2rpx solid #f5f5f5;
					image{
						width: 32rpx;
						height: 32rpx;
					}
				}
				.active{
					color: #333333;
				}
			}
			
			.positBox{
				width: 172rpx;
				height: 172rpx;
				border-radius: 50%;
				background-color: #fff;
				position: absolute;
				top: -86rpx;
				left: 50%;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				transform: translateX(-50%);
				image{
					width: 118rpx;
					height: 118rpx;
					border-radius: 50%;
					border: 2rpx solid #EFB82F;
				}
			}
		}
	}
</style>
